<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ include file="/commons/taglibs.jsp" %>

<title><fmt:message key="${ClassName}.title"/></title>
<script src='${r"${ctx}"}/assets/js/bootstrap-paginator.min.js'></script>
<script>
$(".${table.tableJavaName}").addClass("active").parent("ul").parent("li").addClass("active open");
$(document).ready(function(){
	addCustomPaginator('#pagination','#queryForm','#sortColumns','#page', '${r"${query.page}"}','${r"${page.totalPages}"}');
	changeSort("#queryForm","#dynamic-table",'#sortColumns','#page');
	initialTableSort("#dynamic-table",'#sortColumns');

	addPopup("#addButton",'${r"${ctx}"}/${table.tableJavaName}/popup/create','<fmt:message key="navigation.title.create"/> <fmt:message key="${ClassName}.title"/>');
	editPopup(".editButton","${r"${ctx}"}/${table.tableJavaName}/popup/create",'<fmt:message key="navigation.title.edit"/> <fmt:message key="${ClassName}.title"/>');
	editPopup(".viewButton","${r"${ctx}"}/${table.tableJavaName}/popup/view",'<fmt:message key="navigation.title.view"/> <fmt:message key="${ClassName}.title"/>');
	deleteOne(".deleteButton","${r"${ctx}"}/${table.tableJavaName}/json/delete");
	checkAllRecord("#checkAll",".checkitems");
	deleteAll("#deleteAllButton","${r"${ctx}"}/${table.tableJavaName}/json/deleteAll","items","Please select at least one item to delete");
	<#if table.containsDateField>
	addDateRangePicker(".input-daterange")
	</#if>
})
</script>
<menu><fmt:message key="menu.generator.title"/></menu>
<submenu><fmt:message key="${ClassName }.title"/></submenu>
<custom:message/>
<form:form action="${r"${ctx}"}/${table.tableJavaName }/list" modelAttribute="query" id="queryForm" name="queryForm" method="post">
<#list table.columnList as column>
<#if !column.baseField>
<fmt:message key="${ClassName }.${column.javaField }.title" var="${column.javaField }Title"/>
</#if>
</#list>
<div class="row">
	<div class="widget-box">
			<div class="widget-header widget-header-small">
				<h5 class="lighter">Search Form</h5>
			</div>
			<#list table.searchColumnList as c>
			<#if c.queryField>
			<div class="form-group">
				<label class="control-label no-padding-right col-md-2 col-xs-4 col-sm-2">${"${"+c.javaField+"Title}" }</label> 
				<div class="col-md-4 col-xs-8 col-sm-4"> 
					<#if c.fk>
					<form:select path="${c.javaField}" cssClass="form-control">
						<form:option value=""><fmt:message key="selection.label.pleaseselectone"></fmt:message> </form:option>
						<form:options items='${"${" +c.javaField + "List}"}' itemLabel="${c.referenceColumn.referencedDisplayName}" itemValue="id"/>
					</form:select>
					<#elseif c.dateField>
					<div class="input-group input-daterange" data-date-format="dd/mm/yyyy">
						<form:input path="${c.javaField}Begin" cssClass="form-control" readonly="true"/> 
						<span class="input-group-addon">to  </span>
						<form:input path="${c.javaField}End" cssClass="form-control" readonly="true"/> 
					</div>
					<#elseif c.bitField>
					<form:checkbox path="${c.javaField}"/>
					<#elseif c.textareaField>
					
					<#elseif c.dataDictField>
					<form:select path="${c.javaField}" cssClass="form-control">
						<form:option value=""><fmt:message key="selection.label.pleaseselectone"></fmt:message></form:option>
						<form:options items='${"${" + c.javaField + "Map}"}'/>
					</form:select>
					<#else>
					<form:input path="${c.javaField}" cssClass="form-control" /> 
					</#if>
				</div>
			</div>
			</#if>
			</#list>
			<div class="form-group">
				<div class="col-md-offset-2 col-md-9">
					<button class="btn btn-primary radius-4">
						<i class="ace-icon fa fa-search nav-search-icon"></i>
						<fmt:message key="navigation.button.query"/>
					</button>
				</div>
			</div>

		<div class="row">
			<div class="col-xs-12">
				<div class="table-header">
				Search Result
				</div>
				<div>
					<table id="dynamic-table" class="table table-responsive table-striped table-bordered table-hover dataTable">
						<thead>
							<tr>
								<th style="width:1px;"> </th>
								<th style="width:1px;"><input type="checkbox" id="checkAll"></th>
								<#list table.listColumnList as column>
								<#if !column.baseField && !column.fk>
								<th class="sorting" data-name="${column.javaField }">${"$"}{${column.javaField}Title}</th>
								</#if>
								<#if !column.baseField && column.fk>
								<th class="sorting" data-name="${column.referenceColumn.columnNameJavaField + "." + column.referenceColumn.referencedDisplayName }">${"$"}{${column.javaField}Title}</th>
								</#if>
								</#list>				
								<th><fmt:message key="navigation.label.operation"/></th>
							</tr>
						</thead>
						<tbody>
							<c:forEach items='${r"${page.content}"}' var="item" varStatus="status">
								<tr>
									<td data-label="序号">${r"${page.number * page.size + status.index + 1}"}</td>			
									<td><input type="checkbox" name="items" value='${r"${item.id}"}' class="checkitems"></td>						
									<#list table.listColumnList as column>
									<#if !column.baseField && !column.dataDictField && !column.fk>
									<td data-label='${"${"+column.javaField+"Title}" }'><c:out value='${"${"+"item."+column.javaField+"}" }'/>&nbsp;</td>
									</#if>
									<#if !column.baseField && column.dataDictField>
									<td data-label='${"${"+column.javaField+"Title}" }'><c:out value='${"${"+ column.javaField + "Map[item."+column.javaField+"]}" }'/>&nbsp;</td>
									</#if>
									<#if !column.baseField && column.fk>
									<td data-label='${"${"+column.javaField+"Title}" }'><c:out value='${"${"+"item."+column.referenceColumn.columnNameJavaField + "." + column.referenceColumn.referencedDisplayName +"}" }'/>&nbsp;</td>
									</#if>
									</#list>
									<td data-label="<fmt:message key="navigation.label.operation"/>">
										<div class="action-buttons">
											<a class="green editButton" id='editButton-${r"${item.id}"}'>
												<i class="ace-icon fa fa-pencil bigger-130"></i>
											</a>
											<a class="red viewButton" id='viewButton-${r"${item.id}"}'>
												<i class="ace-icon fa fa-info-circle bigger-130"></i>
											</a>
											<a class="red deleteButton" id='deleteButton-${r"${item.id}"}'>
												<i class="ace-icon fa fa-trash-o bigger-130"></i>
											</a>
										</div>						
									</td>
								  </tr>
							</c:forEach>
						</tbody>
					</table>
				</div>
				<div class="ui-pager-control"  style="background-color:#EFF3F8">
					<table class="ui-pg-table ui-common-table ui-pager-table ">
						<tr>
							<td class="ui-pg-button ui-corner-all">
								<div class="ui-pg-div">
									<a id="addButton">
										<span class="ui-icon ace-icon fa fa-plus-circle purple"></span>
									</a>
								</div>
							</td>
							<td class="ui-pg-button ui-corner-all">
								<div class="ui-pg-div">
									<a id="deleteAllButton">
										<span class="ui-icon ace-icon fa fa-trash-o red"></span>
									</a>
								</div>
							</td>							
						</tr>
					</table>
					
				</div>
			</div>
			<div class="">
				<input type="hidden" name="sortColumns" id="sortColumns" value='${r"${query.sortColumns}"}' />
				<input type="hidden" name="page" id="page" value='${r"${query.page}"}' />
				<c:if test='${r"${page.totalPages > 1}"}'>
					<div class=" pull-right">
						<ul id="pagination"></ul>
					</div>
				</c:if>
			</div>
		</div>
	</div>
	
</div>

<script>



</script>

</form:form>